<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>银行卡余额</title>
    <style>
        .table2 {
            background-color: palegreen;
        }
        h1{
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>银行卡流水</h1>
    <script>
        let all = prompt('请输入银行卡总额')
        let water = prompt('请输入水费')
        let elec = prompt('请输入电费')
        let web = prompt('请输入网费')
        let less =all-water-elec-web
        document.write(`
        <form>
            <table align='center' border="1" 
            cellspacing="0" cellpadding="0" 
            width="400" height="100" 
            align="center">
            <tr>
            <td>银行卡总额</td>
            <td>水费</td>
            <td>电费</td>
            <td>网费</td>
            <td>银行卡余额</td>
            </tr>
            <tr class="table2">
            <td>${all}</td>
            <td>${water}</td>
            <td>${elec}</td>
            <td>${web}</td>
            <td>${less}</td>
            </tr>
            </form>
            </table>`)
    </script>
</body>
</html>